<!DOCTYPE HTML>
<html lang="en">
  
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Limelight|Flamenco|Federo|Yesteryear|Josefin Sans|Spinnaker|Sansita One|Handlee|Droid Sans|Oswald:400,300,700" media="screen" rel="stylesheet" type="text/css" />
    <link href="css/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="css/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="css/common.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="css/fontawesome.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="css/lee-sin.css" media="screen" rel="stylesheet" type="text/css" />
    <!-- Typekit fonts require an account and a kit containing the fonts used. see https://typekit.com/plans for details. <script type="text/javascript" src="//use.typekit.net/YOUR_KIT_ID.js"></script>
  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
-->	
	<style>
		body{
			padding: 0; margin: 0;
		}
		p{
			color: #6600CC;
		}
		a{
			text-decoration: none;
		}
		a:hover{
			text-decoration: underline;
			color: red;
		}
		ul{
			list-style:none;
		}
		#wapper{
			background: #F8F8F8 ;	
		}
		.wap{
			width: 760px;
			height: 500px;
			margin: 0px auto;
		}
		label{
			color: #6600CC;
			font-size: 3em;
			font-weight: bold;
		}

		img.btn_close {
			float: right; 
			margin: -28px -28px 0 0;
		}
		.login-popup{
			height: 550px;
			width: 800px;
			display:none;
			background: #D0D0D0;
			padding: 10px; 	
			border: 2px solid #ddd;
			float: left;
			position: fixed;
			top: 300px; left: 50%;
			z-index: 88888;
			
		}
		#mask {
			display: none;
			background: #D0D0D0; 
			position: fixed; left: 0; top: 0; 
			z-index: 10;
			width: 100%; height: 100%;
			opacity: 0.8;
			z-index: 999;
			border-radius-right: 2px;
			border-radius-left: 2px;
			border-radius-top: 2px;
			border-radius-bottom: 2px;
		}
		#col-1{
			width: 10px;
		}
		#col-2{
			width:100px;
		}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$('a.login').click(function() {
			
			// Getting the variable's value from a link 
			var loginBox = $(this).attr('href');

			//Fade in the Popup and add close button
			$(loginBox).fadeIn(300);
			
			//Set the center alignment padding + border
			var popMargTop = ($(loginBox).height() + 24) / 2; 
			var popMargLeft = ($(loginBox).width() + 24) / 2; 
			
			$(loginBox).css({ 
				'margin-top' : -popMargTop,
				'margin-left' : -popMargLeft
			});
			
			// Add the mask to body
			$('body').append('<div id="mask"></div>');
			$('#mask').fadeIn(300);
			
			return false;
		});
		
		// When clicking on the button close or the mask layer the popup closed
		$('a.close, #mask').live('click', function() { 
		  $('#mask , .login-popup').fadeOut(300 , function() {
			$('#mask').remove();  
		}); 
		return false;
		});
	});
	</script>
    <title>Vnplace - Du lịch khắp bốn phương</title>
  </head>
  
  <body>
    <div id="page-wrapper">
		<div id="absolute-wrapper">
			<div class="navbar">
				<div class="navbar-inner"></div>
			</div>
			<a class="brand" href="#"><img src="image/address.png" width="50" height="50"/>
			</a>
			<li class="li-1">
				<a href="#">Tạo địa điểm mới</a>
			</li>
			<li class="li-2">
				<a href="#">Giới thiệu</a>
			</li>
			<li class="li-3">
				<a href="#">Giúp đỡ</a>
			</li>
			<h1 class="heading heading-1">VnPlace</h1>
			
	<!-- -----------Form seach-------------- -->
			<form method="post">
				<input name="txt-search" class="textinput" type="text" placeholder="Nhập địa điểm cần tìm kiếm...">
				<input type="submit" class="btn" value="Tìm kiếm" />
			</form>
			
			<div id="province-input">
				<input class="text-pro" type="text" />
			</div>
			<div id="province-link">
				<a href="#wapper" class="login">...</a>
			</div>
			<div id="text-province">
				<p style="color: #B0B0B0;">Tỉnh</p>
			</div>
			<div id="footer">
				<h5 class="heading heading-2">© Copyright 2014 VnPlace.vn
					<br>
				</h5>
			</div>
<!---------------------------- Chọn tỉnh ----------------------- -->
		<div id="wapper" class="login-popup">
		<a href="#" class="close"><img src="image/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
		<table class="wap">
			<tr>
				<td  id="col-1"><label>A</label></td>
				<td id="col-2" class="province"><a href="http://www.zing.vn">An Giang</a></td>
				
				<td  id="col-1"><label>G</label></td>
				<td class="province" id="col-2"><a href="">Gia Lai</a></td>
				
				<td id="col-1"><label>N</label></td>
				<td class="province" id="col-2">
					<a href="">Nam Định</a><br/>
					<a href="">Nghệ An</a><br/>
					<a href="">Ninh Bình</a><br/>
					<a href="">Ninh Thuận</a>
				</td>
				
				<td id="col-1"><label>V</label></td>
				<td class="province" id="col-2">
					<a href="">Vĩnh Long</a><br/>
					<a href="">Vĩnh Phúc</a>
				</td>
			</tr>
<!-- ------------------------------------------------------------------------------------------ -->	
			<tr>
				
				<td><label>B</label></td>
				<td class="province">
					<a href="">Bà Rịa - Vũng Tàu</a><br/>
					<a href="">Bạc Liêu</a><br/>
					<a href="">Bắc Kạn</a><br/>
					<a href="">Bắc Giang</a><br/>
					<a href="">Bắc Ninh</a><br/>
					<a href="">Bến Tre</a><br/>
					<a href="">Bình Dương</a><br/>
					<a href="">Bình Định</a><br/>
					<a href="">Bình Phước</a><br/>
					<a href="">Bình Thuận</a>
				</td>
				<td><label>H</label></td>
				<td class="province">
					<a href="">Hà Giang</a><br/>
					<a href="">Hà Nam</a><br/>
					<a href="">Hà Nội</a><br/>
					<a href="">Hà Tĩnh</a><br/>
					<a href="">Hải Dương</a><br/>
					<a href="">Hải Phòng</a><br/>
					<a href="">Hòa Bình</a><br/>
					<a href="">Hậu Giang</a><br/>
					<a href="">Hưng Yên</a>
				</td>
				<td><label>P</label></td>
				<td class="province">
					<a href="">Phú Thọ</a><br/>
					<a href="">Phú Yên</a>
				</td>
				<td><label>T</label></td>
				<td class="province">
					<a href="">TP. Hồ Chí Minh</a><br/>
					<a href="">Tây Ninh</a><br/>
					<a href="">Thái Nguyên</a><br/>
					<a href="">Thanh Hóa</a><br/>
					<a href="">Thừa Thiên - Huế</a><br/>
					<a href="">Tiền Giang</a><br/>
					<a href="">Trà Vinh</a><br/>
					<a href="">Tuyên Quang</a>
				</td>
			</tr>
<!-- ------------------------------------------------------------------------------------------ -->				
			<tr>
				
				<td><label>C</label></td>
				<td class="province">
					<a href="">Cà Mau</a><br/>
					<a href="">Cao Bằng</a><br/>
					<a href="">Cần Thơ</a>
				</td>
				
				<td><label>K</label></td>
				<td class="province">
					<a href="">Khánh Hòa</a><br/>
					<a href="">Kiên Giang</a><br/>
					<a href="">Kon Tum</a>
				</td>
				<td><label>Q</label></td>
				<td class="province">
					<a href="">Quảng Bình</a><br/>
					<a href="">Quảng Nam</a><br/>
					<a href="">Quảng Ngãi</a><br/>
					<a href="">Quảng Ninh</a><br/>
					<a href="">Quảng Trị</a>
				</td>
				<td><label>Y</label></td>
				<td class="province">
					<a href="">Yên Bái</a>
				</td>
			</tr>
<!-- ------------------------------------------------------------------------------------------ -->				
			<tr>
				<td><label>D</label></td>
				<td class="province">
					<a href="">Đà Nẵng</a><br/>
					<a href="">Đắk Lắk</a><br/>
					<a href="">Đắk Nông</a><br/>
					<a href="">Đồng Nai</a><br/>
					<a href="">Đồng Tháp</a><br/>
					<a href="">Điện Biên</a>
				</td>
				
				<td><label>L</label></td>
				<td class="province">
					<a href="">Lai Châu</a><br/>
					<a href="">Lào Cai</a><br/>
					<a href="">Lạng Sơn</a><br/>
					<a href="">Lâm Đồng</a><br/>
					<a href="">Long An</a><br/>
				</td>
				<td><label>S</label></td>
				<td class="province">
					<a href="">Sóc Trăng</a><br/>
					<a href="">Sơn La</a>
				</td>		
			</tr>
		</table>
		</div>
<!-- ----------------End div chọn tỉnh----------- -->     
	 </div>
    </div>
  </body>

</html>